<template>
  <div class="show-expert-message">
    <el-dialog width="70%" title="查看专家信息" :visible.sync="showExpertSync" :before-close="handleCloseDialog" >
      <el-card shadow="never" v-loading="loading">
        <el-descriptions class="margin-top" title="专家信息列表" :column="4" border>
          <el-descriptions-item span="1">
            <template slot="label">
              <i class="el-icon-picture"></i>专家照片
            </template>
            <img @click="handlePreview" class="expert-photo" :src="expertPhotoUrl" alt="图片加载失败"/>
          </el-descriptions-item>
          <el-descriptions-item span="3">
            <template slot="label">
              <i class="el-icon-document"></i>
              专家简介
            </template>
            <div class="ql-editor">
              <p v-html="this.expertInfo.expertIntroduce"></p>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              专家姓名
            </template>
            {{ this.expertInfo?this.expertInfo.expertName:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              身份证号
            </template>
            {{this.expertInfo?this.expertInfo.expertIdNumber:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-phone-outline"></i>
              手机号
            </template>
            {{this.expertInfo? this.expertInfo.expertPhone:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱
            </template>
            {{ this.expertInfo?this.expertInfo.expertEmail:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-male"></i>
              性别
            </template>
            <el-tag>{{ this.expertInfo?this.expertInfo.expertSex === 0 ? '女' : '男':'男' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-collection"></i>
              学历
            </template>
            {{ this.expertInfo?this.expertInfo.expertEducation:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-notebook-2"></i>
              专业
            </template>
            {{ this.expertInfo?this.expertInfo.expertMajor:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-trophy"></i>
              职称
            </template>
            {{ this.expertInfo?this.expertInfo.expertTitle:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-operation"></i>
              专家分类
            </template>
            <el-tag>{{ this.expertInfo?this.expertInfo.expertCategoryName:'' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              单位
            </template>
            {{ this.expertInfo?this.expertInfo.expertUnit:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-position"></i>
              所在地
            </template>
            {{ this.expertInfo?this.expertInfo.expertRegion:'' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-star-on"></i>
              评分
            </template>
            <el-rate v-model="expertScore"  disabled show-score
                     text-color="#ff9900" :max=5>
            </el-rate>
          </el-descriptions-item>
        </el-descriptions>
        <el-dialog width="25%" class="show-expert-dialog" :modal="false" :visible.sync="dialogVisible">
          <img @click="handlePreview" style="border-radius: 5px" width="100%" :src="this.expertPhotoUrl" alt="">
        </el-dialog>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import store from '@/store'
import { getExpertInfoById } from '@/request/expert/expert-api'
import { VueEditor } from 'vue2-editor'

export default {
  components: { VueEditor },
  computed: {
    listenShowExpertId () {
      return store.state.ExpertEdit.showExpertId
    },
    ...mapState({
      showExpertSync: state => state.ExpertEdit.showExpertSync,
      showExpertId: state => state.ExpertEdit.showExpertId
    })
  },
  data () {
    return {
      expertInfo: '',
      expertPhotoUrl: '',
      dialogVisible: false,
      expertScore:0,
      loading:false,
    }
  },
  methods: {
    close () {
     this. dialogVisible=false
      store.commit('ExpertEdit/changeShowExpertSync', false)
      store.commit('ExpertEdit/changeShowExpertId', null)
    },    // 点击文件
    handlePreview () {
      this.dialogVisible = !this.dialogVisible
    },
    handleCloseDialog () {
      this.$confirm('确定取消查看专家信息吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(async () => {
        await this.close()
        this.expertInfo = ''
        this.expertPhotoUrl = ''
        this.expertScore=0
        this.loading=false
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
    async showExpertInit (id) {
      this.loading=true
      let res = await getExpertInfoById(id)
      if (res.code === 200) {
        this.expertInfo = res.data
        this.expertInfo.expertIntroduce=res.data.expertIntroduce
        this.expertScore=res.data.expertScore===null?5:res.data.expertScore
        this.expertPhotoUrl = 'data:image/gif;base64,' + res.data.expertPhotoSrc
        this.loading=false
      }
    }
  },
  watch: {
    listenShowExpertId: {
      immediate: true,
      handler (val, old) {
        if (val) {
          this.showExpertInit(val)
        }
      }
    }
  }

}
</script>
<style scoped lang="less">

/deep/ .el-dialog {
  border-radius: 10px;
}
.el-card{
  margin-bottom: 20px;
}
/deep/.ql-toolbar{
  display: none!important;
}
/deep/.ql-editor{
  min-height: 150px!important;
  max-height: 150px!important;
}
.expert-photo{
  width: 100px;
  height: 140px;
}
.show-expert-dialog{
  top: -60px;
}
</style>
